<template>
  <n-split direction="horizontal" :min="0.15" :max="0.8" default-size="200px">
    <template #1>
      <el-tree :data="props.value.format" default-expand-all node-key="id" @node-click="handleNodeClick"
        :highlight-current="true">
        <template #default="{ node, data }">
          <div class="custom-tree-node">
            <span>
              <i class="iconfont icon-wenjian" v-if="node.data.type == 'file'"></i>
              <i class="iconfont icon-wj-wjj" v-if="node.data.type == 'folder'"></i>
              {{ node.label }}
            </span>
          </div>
        </template>
      </el-tree>
    </template>
    <template #2>
      <codeMirrorVue v-model:propCode="curShowCode" v-if="curNode && curNode.type == 'file'"></codeMirrorVue>
    </template>
  </n-split>
</template>

<script setup>
import { onMounted, reactive, ref, watch } from 'vue'
import codeMirrorVue from "@/components/ojComponents/compiler/codeMirrorVue.vue"

const props = defineProps({
  value: {
    type: Object,
    default: {
      pid: "",
      code: "",
      language: "",
      format: []
    }
  },
  language: {
    type: String,
    default: "Java"
  }
})
const emit = defineEmits(['treeDataChange'])

// 当前选中节点 普通格式
const curNode = ref(null)
const curShowCode = reactive({
  code: '',
  language: props.language,
})
/**
 * 节点点击事件
 * @param data 
 */
const handleNodeClick = (data) => {
  curNode.value = data
  if (data.type === 'file') {
    curShowCode.code = data.code
  } else {
    curShowCode.code = ''
  }
}

watch(() => curShowCode.code, (newV) => {
  curNode.value.code = newV
})

watch(() => curNode.value, (newV) => {
  curShowCode.code = newV.code
  emit('treeDataChange',props.value)
  
}, { deep: true })


</script>

<style lang="less" scoped></style>